<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" :title=" '流程图' + (click_enable ? '(双击审批环节设置审批人员)' : '')" fullscreen center>
    <div style="overflow: auto;position: absolute;width: 100%;height: 100%;" >
      <el-image :src="getFlowImageUrl" style="position:absolute;" fit="fill" />
      <el-tooltip
        v-for="item in nodeHtmlMap"
        :key="item.activityId"
        :style="item.tipPosition"
        placement="right-start">
        <div slot="content" v-html="item.tipInfo" />
        <span @dblclick="clickConfigActivity(item)" v-html="item.htmlStr" />
      </el-tooltip>
      <flowUserConfigSet v-if="click_enable" ref="flowUserConfigSet" :sup_this="sup_this" />
    </div>
  </el-dialog>
</template>

<script>
import { flowImageUrl, getFlowImageInfo } from '@/api/system/workflowDef'
import flowUserConfigSet from '@/views/system/workflow/workflowDef/module/flowUserConfigSet'
import { getUserInfo } from '@/utils/auth'

export default {
  components: { flowUserConfigSet },
  props: {
    sup_this: {
      type: Object,
      required: true
    },
    click_enable: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      dialog: false,
      flowKey: '',
      processInstanceId: '',
      nodeHtmlMap: [],
      configMngData: {}
    }
  },
  computed: {
    getFlowImageUrl() {
      const cpyCode = getUserInfo().cpyCode
      return flowImageUrl() + '?flowKey=' + this.flowKey + '&processInstanceId=' + this.processInstanceId + '&tk=' + Date.parse(new Date()) + '&cpyCode=' + cpyCode
    }
  },
  methods: {
    beforeCreate() {
    },
    clickConfigActivity(nodeInfo) {
      if (!this.click_enable) {
        return
      }
      if (nodeInfo.nodeType !== 'userTask') {
        return
      }
      // const activityId = nodeInfo.activityId
      const _this = this.$refs.flowUserConfigSet
      _this.configMngData = this.configMngData
      _this.nodeInfo = nodeInfo
      _this.activityName = nodeInfo.activityName
      _this.isMultiinstance = nodeInfo.isMultiinstance
      _this.initSet(this.configMngData.id, nodeInfo.activityId)
    },
    initDisplayInfo(flowKey, curActivityId) {
      const data = { paramBean: { flowKey: flowKey, curActivityId: curActivityId }}
      const tmpNodeMap = []
      getFlowImageInfo(data).then(res => {
        res.data.forEach(function(nodeInfo) {
          var htmlStr = ''
          // htmlStr = htmlStr + '<div class="activity-node" style="position:absolute;left: ' + (nodeInfo.x - 1) + 'px; top: ' + (nodeInfo.y - 1) + 'px; width: ' + (nodeInfo.width - 2) + 'px; height: ' + (nodeInfo.height - 2) + 'px; background-color: black; opacity: 0;">dsf</div>'
          // htmlStr = htmlStr + '<div class="activity-border' + (nodeInfo.isCurActivity ? ' ui-corner-all-12 activity-node-active' : '') + '" activityname="' + nodeInfo.activityName + '" activityid="' + nodeInfo.activityId + '" activitytype="' + nodeInfo.nodeType + '" ismultiinstance="' + nodeInfo.isMultiinstance + '"' + ' style="position:absolute;left: ' + (nodeInfo.x - 1) + 'px; top: ' + (nodeInfo.y - 1) + 'px; width: ' + (nodeInfo.width - 2) + 'px; height: ' + (nodeInfo.height - 2) + 'px;">sdf</div>'
          var tipPosition = 'position:absolute;cursor:hand;cursor: pointer;left: ' + (nodeInfo.x - 1) + 'px; top: ' + (nodeInfo.y - 1) + 'px;width: ' + (nodeInfo.width + 2) + 'px; height: ' + (nodeInfo.height + 2) + 'px;' + (nodeInfo.isCurActivity ? 'border: 3px solid red;' : '')
          var tipInfo = '节点名称: ' + nodeInfo.activityName + '<br>节点说明:' + (nodeInfo.documentation || '无') + '<br>描述:' + (nodeInfo.description || '无')
          tmpNodeMap.push({ 'nodeType': nodeInfo.nodeType, 'activityName': nodeInfo.activityName, 'isMultiinstance': nodeInfo.isMultiinstance, 'activityId': nodeInfo.activityId, 'htmlStr': htmlStr, 'tipInfo': tipInfo, 'tipPosition': tipPosition })
        })
        this.nodeHtmlMap = tmpNodeMap
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style>
</style>
